<template>
	<view class="box">
		<view class="wrap_headimg" @click="getheadimg">
			<text>头像</text>
			<image class="headimg" :src="imgurl" mode="aspectFill"></image>
			<image :src="baseUrl + '/static/icon/right.png'" class="right" mode="aspectFill"></image>
		</view>
		<view class="wrap_item" @click="goname">
			<view class="text">昵称</view>
			<view class="sex">
				{{name}}
			</view>
			<image :src="baseUrl + '/static/icon/right.png'" class="right" mode="aspectFill"></image>
		</view>
		<view class="wrap_item" @click="show=true">
			<view class="text">性别</view>
			<view class="sex">
				{{sexval}}
			</view>
			<image :src="baseUrl + '/static/icon/right.png'" class="right" mode="aspectFill"></image>
		</view>

		<view class="wrap_item">
			<view class="text">微信</view>
			<view class="sex" @click="gowx">
				{{wechat||"未设置"}}
			</view>
			<image :src="baseUrl + '/static/icon/right.png'" class="right" mode="aspectFill"></image>
		</view>
		<view class="wrap_item">
			<view class="text">联系电话</view>
			<view class="sex" @click="gophone">
				{{contact_number||"未设置"}}
			</view>
			<image :src="baseUrl + '/static/icon/right.png'" class="right" mode="aspectFill"></image>
		</view>

		<u-picker :show="show" :columns="columns" confirmColor="#FFC300" @cancel="show=false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		edituser,
		myuser
	} from "../../api/user.js"
	import {
		baseURL
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				name: 'sss',
				show: false,
				columns: [
					['未知', '男', '女', ]
				],
				sex: 1,
				imgurl: "",
				sexval: "未知",
				urls: "",
				wechat:"",
				contact_number:""
			}
		},
		onShow() {
			this.getuser()
		},
		watch: {

		},
		methods: {
			edits(){
				edituser({
					gender:this.sex
				}).then(res=>{
					uni.$u.toast(res.msg)
					this.getuser()
				})
			},
			getuser() {
				myuser().then(res => {
					this.imgurl = res.data.avatar
					this.name = res.data.nickname
					this.wechat=res.data.wechat
					this.contact_number=res.data.contact_number
					if (res.data.gender == 0) {
						this.sexval = "未知"
					}
					if (res.data.gender == 1) {
						this.sexval = "男"
					}
					if (res.data.gender == 2) {
						this.sexval = "女"
					}

				})
			},
			gowx() {
				uni.navigateTo({
					url: "/pageUser/myuser/amendwx"
				})
			},
			gophone() {
				uni.navigateTo({
					url: "/pageUser/myuser/amendphone"
				})
			},
			goname() {
				uni.navigateTo({
					url: "/pageUser/myuser/amendname"
				})
			},
			editimg() {
				edituser({
					avatar: this.urls
				}).then(res => {
					uni.$u.toast(res.msg)
					this.getuser()
				})
			},
			getheadimg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					formData: {
						'user': 'test'
					},
					success: (chooseImageRes) => {
						console.log(chooseImageRes, "999")
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseURL + `shop/common/upload`,
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								"ba-user-token": uni.getStorageSync("token") || ''
							},
							success: (res) => {
								console.log(res, "99900")

								this.imgurl = JSON.parse(res.data).data.full_url
								this.urls = JSON.parse(res.data).data.url
								console.log(JSON.parse(res.data).data.full_url)
								this.editimg()
								//  console.log(JSON.parse(res.data).data.path,"qwdqw") 
								// console.log(res,"上传")
							}
						});
					}
				});
			},

			confirm(e) {
				if (e.value == "未知") {
					this.sex = 0
					this.sexval = "未知"
				}else if (e.value == "男") {
					this.sex = 1
					this.sexval = "男"
				} else {
					this.sex = 2
					this.sexval = "女"
				}
				this.show = false
				this.edits()
				console.log(this.sex, "选择结果")


			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 1624rpx;

	}

	.wrap_headimg {
		width: 750rpx;
		height: 92rpx;
		position: relative;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #F7F7F7;
		display: flex;
		align-items: center;

		>text {
			position: absolute;
			left: 54rpx;
			font-size: 30rpx;
			color: #333;
		}

		.headimg {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			position: absolute;
			right: 78rpx;
		}

		.uni-text {
			position: absolute !important;
			right: 0rpx !important;
		}

		.right {
			width: 12rpx;
			height: 24rpx;
			position: absolute;
			// top: 58rpx;
			right: 40rpx;
		}

	}

	.wrap_item {
		width: 750rpx;
		height: 92rpx;
		position: relative;
		background-color: #fff;
		margin: 0 auto;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F7F7F7;

		.text {
			position: absolute;
			// top: 52rpx;
			left: 54rpx;
			font-size: 30rpx;
			color: #333;
		}

		.whimg {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 120rpx;
		}

		.whimg2 {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 180rpx;
		}

		.sex {
			position: absolute;
			right: 100rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.phone {
			position: absolute;
			right: 100rpx;
			font-size: 32rpx;
			color: #A7A4AD;

			>image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			width: 12rpx;
			height: 24rpx;
			position: absolute;
			// top: 58rpx;
			right: 40rpx;
		}

		>input {
			position: absolute;
			// top: 52rpx;
			right: 92rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #333 !important;
			text-align: right;
			// background-color: red;
		}
	}

	.ipt {
		width: 654rpx;
		height: 304rpx;
		background: #F2F2F2;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 26rpx;
		color: #333 !important;
		padding: 32rpx;
	}

	.btn {
		position: relative;
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.textareas {
		position: relative;
	}

	.textareas>textarea {
		font-size: 28rpx;
	}

	.surplus {
		position: absolute;
		bottom: 10rpx;
		right: 50rpx;
		font-size: 24rpx;
		color: #ffffff;
		z-index: 999;
	}

	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}
</style>